<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="CSS/public.css">
    <link rel="stylesheet" href="CSS/System.css">
    <link rel="stylesheet" href="CSS/heop3.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="main">
        <div class="main_p">
            <p> <span>渔业资源管理系统</span> <i>/</i> <span>系统管理</span> <i>/</i> <span>组织管理</span> </p>
        </div>

        <div class="manage_box">

            <!-- 里面2层 -->
            <div class="heop2-box">
                <div class="rw-content">
                    <div class="query">
                        <form id="form_query" action="">
                            <label for="">角色名称</label>
                            <div class="sz_box">
                                <input type="text" placeholder="请输入">
                                <span class="span"><span>0</span>/10</span>
                            </div>
                            <button class="query_btn">查询</button>
                            <button class="reset">重置</button>
                        </form>
                    </div>

                    <div class="info_box">
                        <table cellspacing="0" cellpadding="20">
                            <optgroup>
                                <tr>
                                    <th>ID</th>
                                    <th>角色编号</th>
                                    <th>角色名称</th>
                                    <th>创建时间</th>
                                    <th>创建人</th>
                                    <th>有效</th>
                                    <th>角色描述</th>
                                    <th>
                                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="creage">
                                            新建
                                        </button></th>

                                </tr>
                            </optgroup>

                            <body>
                                <tr>
                                    <td>1</td>
                                    <td>XTGLY</td>
                                    <td>系统管理员22</td>
                                    <td>2021-08-05 01:51:00</td>
                                    <td>admin</td>
                                    <td>✔</td>
                                    <td>系统管理员</td>
                                    <td class="change">
                                        <span>修改</span>
                                        <span>删除</span>
                                    </td>
                                </tr>
                            </body>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <div class="container">
        <!-- 按钮：用于打开模态框 -->
       
        <!-- 模态框 -->
        <div class="modal fade " id="myModal">

            <div class="modal-dialog modal-lg ">
                <div class="modal-content  ">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">新建用户</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        <div class="containe  " style="padding-left: 20px;">
                            <form class="form-horizontal " role="form">
                                <div class="form-group  row ">
                                    <label for="firstname" class="col-sm-0  control-label   ">角色编译</label>
                                    <div class="col-sm-10 ">
                                        <input type="text" class="form-control" id="firstname" placeholder="角色编号">
                                    </div>
                                </div>
                                <div class="form-group  row ">
                                    <label for="firstname" class="col-sm-0  control-label  ">角色名称</label>
                                    <div class="col-sm-10 ">
                                        <input type="text" class="form-control" id="firstname" placeholder="角色名称">
                                    </div>
                                </div>
                                <div class="form-group  row ">
                                    <label for="firstname" class="col-sm-0  control-label  ">角色描述</label>
                                    <div class="col-sm-10 ">
                                        <textarea name="" id="" cols="100" rows="4" placeholder="角色描述"
                                            style="padding-left: 10px;"></textarea>
                                    </div>
                                </div>
                                <div class="form-group  row">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-default "
                                            style="background-color: #898989; width: 70px;">保存</button>
                                        <button type="submit" class="btn btn-default "
                                            style="background-color: blue; width: 70px; ">取消</button>
                                    </div>



                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>

</html>